<template>
  <view
    v-if="navbar.showBg"
    :style="showBgCustomStyle"
    class="fixed z-9999 top-0 left-0 pointer-events-none w-full overflow-hidden"
  >
    <!-- 根据传入的背景类型显示不同的背景 -->
    <template v-if="navbar.bgType === 'image'">
      <image
        class="w-full"
        :src="navbar.bgImage || freeConfig.bgImage"
        mode="widthFix"
      />
    </template>
    <template v-else-if="navbar.bgType === 'color'">
      <view
        class="w-full h-full"
        :style="{ backgroundColor: navbar.bgColor }"
      ></view>
    </template>
  </view>
  <wd-navbar
    :fixed="true"
    :placeholder="navbar.placeholder"
    safeAreaInsetTop
    :z-index="9999"
    v-bind="showNavbarProps"
    custom-style="background-color: transparent !important;"
  >
    <template #left>
      <view class="flex gap-1 items-center">
        <view v-if="_pages > 1" @click="onPageBack" class="size-56 center">
          <wd-icon name="thin-arrow-left" size="32rpx"></wd-icon>
        </view>
        <slot name="navbar-left"></slot>
      </view>
    </template>
    <template #title>
      <slot name="navbar-title">
        <view class="text-size-5 font-500" :style="{ color: navbar.color }">{{
          showNavbarProps.title
        }}</view>
      </slot>
    </template>
    <!-- #ifndef MP-WEIXIN -->
    <template #right>
      <slot name="navbar-right"></slot>
    </template>
    <!-- #endif -->
  </wd-navbar>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { freeConfig } from "@/free-components/config";
import { addUnit } from "@/utils";

const { statusBarHeight } = uni.getSystemInfoSync();

const showBgCustomStyle = computed(() => {
  return {
    height: `calc(var(--wot-navbar-height, 44px) + ${addUnit(
      statusBarHeight || 0
    )})`,
  };
});

const props = defineProps({
  navbar: {
    type: Object,
    default() {
      return {
        showBg: false,
        placeholder: false,
      };
    },
  },

});

const showNavbarProps = computed(() => {
  const defaultProps = {
    title: import.meta.env.VITE_APP_NAME,
    customStyle: "background-color: transparent !important;",
    bordered: false,
  };
  return {
    ...defaultProps,
    ...props.navbar,
  };
});

const onPageBack = () => {
  uni.navigateBack();
};

// 当前页面栈数量
const _pages = ref(1);

onMounted(() => {
  _pages.value = getCurrentPages().length;
});
</script>

<style lang="scss" scoped></style>
